<template>
  <div class="loginBox">
    <el-form
      ref="form"
      :model="form"
      class="login"
      :label-position="labelPosition"
    >
      <div style="height: 450px">
        <img src="../assets/back.png" style="height: 450px" />
      </div>
      <div class="loginform">
        <h3 style="font-weight: 400; font-style: normal; font-size: 30px">
          维修调度管理系统
        </h3>
        <p
          style="
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #a9a9a9;
            margin-top: 10px;
          "
        >
          WELCOMEE欢迎登录
        </p>
        <el-form-item label="账号">
          <el-input placeholder="请输入账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div class="Verification">
            <el-input placeholder="请输入验证码" v-model="form.Verificatiob">
            </el-input>
            <div>
              <img
                id="refreshCaptcha"
                class="validateImg'"
                :src="Code"
                style="width: 90px; margin-left: 10px"
                @click="change"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="login">立即登录</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        Verificatiob: "",
      },
      labelPosition: "top",
      Code: "",
    };
  },
  methods: {
    login: function () {
      this.$axios({
        url: "/user/login",
        method: "post",
        data: {
          userName: this.form.username,
          pwd: this.form.password,
          captcha:this.form.Verificatiob
        },
      }).then(({data}) => {
        // console.log(data);
        if(data.code==0){
          sessionStorage.setItem('token',data.msg)
          sessionStorage.setItem('user',JSON.stringify(data.data))
          this.$message.success('登录成功！')
          this.$router.push("/home");
        }else{
          this.$message.error(data.msg)
        }
      });
    },
    change: function () {
      this.Code =
        // "http://118.31.58.45:8080/maintenance/checkCode?i=" + Math.random();
        // 本机地址
        "http://192.168.227.190:8890/maintenance/checkCode?i=" + Math.random();
    },
  },
  created: function () {
    this.change();
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.loginBox {
  width: 100%;
  height: 100vh;
  background-color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login {
  padding: 40px 40px 40px 40px;
  background: #ffffff;
  width: 900px;
  height: 500px;
  border-radius: 25px;
  display: flex;
  align-items: center;
}
.loginform {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 80px;
}
.el-input__inner {
  width: 200px;
}
.Verification {
  display: flex;
}
</style>
